import factory from '../../assets/factory.svg'

const Flow = G6Editor.Flow

// 卡片基础模板
Flow.registerNode('base-model', {
  draw(item) {
    const group = item.getGraphicGroup();
    const model = item.getModel();
    const width = 70;
    const height = 70;
    const x = -width / 2;
    const y = -height / 2;
    const keyShape = group.addShape('image', {
      attrs: {
        x,
        y,
        width,
        height,
        img: this.image
      }
    })
    group.addShape('text', {
      attrs: {
        text: model.label,
        x: 0,
        y: y + 120,
        textAlign: 'center',
        textBaseline: 'top',
        fill: model.color ? model.color : 'rgba(0,0,0,0.65)'
      }
    });
    group.addShape('rect', {
      attrs: {
        x,
        y,
        width,
        height,
        radius: 4,
        lineWidth: 2,
        stroke: '#666'
      }
    });
    if (item.animate) {
      var back1 = group.addShape('rect', {
        zIndex: -3,
        attrs: {
          x,
          y,
          width,
          height,
          // fill: '#000',
          stroke: '#666',
          opacity: 0.6
        }
      });
      var back2 = group.addShape('rect', {
        zIndex: -2,
        attrs: {
          x,
          y,
          width,
          height,
          // fill: '#000',
          stroke: '#666',
           // 为了显示清晰，随意设置了颜色
          opacity: 0.6
        }
      });
  
      var back3 = group.addShape('rect', {
        zIndex: -1,
        attrs: {
          x,
          y,
          width,
          height,
          // fill: '#000',
          stroke: '#666',
          opacity: 0.6
        }
      });
      group.sort(); // 排序，根据zIndex 排序
      back1.animate({ // 逐渐放大，并消失
        x: x - 10,
        y: y - 10,
        width: width + 20,
        height: height + 20,
        opacity: 0.1,
        repeat: true // 循环
      }, 3000, 'easeCubic', null, 0); // 无延迟
  
      back2.animate({ // 逐渐放大，并消失
        x: x - 10,
        y: y - 10,
        width: width + 20,
        height: height + 20,
        opacity: 0.1,
        repeat: true // 循环
      }, 3000, 'easeCubic', null, 1000); // 1 秒延迟
  
      back3.animate({ // 逐渐放大，并消失
        x: x - 10,
        y: y - 10,
        width: width + 20,
        height: height + 20,
        opacity: 0.1,
        repeat: true // 循环
      }, 3000, 'easeCubic', null, 2000); // 2 秒延迟
    }
    return keyShape;
  },
  anchor: [[0,0],[.5,0],[1, 0],[1,.5],[.5,1],[0, 1],[0,.5],[1,1]]
})

Flow.registerNode('k-means-test', {
  label: 'k 均值聚类',
  image: factory
}, 'base-model')